
<template>
  <div class="block">
    <div class="wrap" style="background-image:url(../assets/images/404pic.jpg);">
      <div class="inner">
        <ul class="circle">
          <li class="tips"></li>
          <li class="ctext">
            <p id="err">404</p>
            <p id="err">ERROR</p>
            <p>很抱歉，</p>
            <p>
              你要访问的
              <b>页面</b>
            </p>
            <p>
              <strong>正在旅行途中...</strong>
            </p>
          </li>
          <li>
            <router-link to="/index/home">返回首页&gt;</router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style>
ul {
  list-style: none;
}
.block{
  width: 100%;
  height: 100%;
  background: url(../assets/images/404pic.jpg) no-repeat;
  background-size: 100% 100%;
}
.wrap ul {
  padding-left: 150px;
  position: relative;
  top: 100px;
  left: 80px;
  width: 496px;
  height: 421px;
  padding-top: 60px;
  border-radius: 248px;
  overflow: hidden;
  background-color: rgba(251, 232, 26, 0.9);
}
.warp li {
  margin-left: 120px;
  width: 178px;
  margin: 0 auto;
  font-size: 16px;
  color: #000;
  line-height: 1em;
}

/* .warp li p{
    padding-bottom: 18px;
  } */
#err {
  font-size: 40px;
}
.warp li b {
  font-size: 22px;
  font-weight: normal;
}
.wrap li strong {
  font-size: 24px;
  font-weight: normal;
}
.wrap li a {
  font-size: 16px;
  color: #cc3300;
}
</style>